<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="weather.css" />
	</head>
	<body>
		<div class="weather">
			<div class="weather-le fl ">
				<span class="time">09月23日</span>&nbsp;&nbsp;周<span class="work"></span>
				<div class="image"><img class="bg" src="images/100.png" ></div>
				<div class="info">
					<span class="temp"></span>
					<span class="bg-2">
						<div class="bg-3">℃</div><em class="state"></em>
					</span>(实时)
				</div>
				<p class="oneday">
					<em class="tempMin">25</em>~
					<em class="tempMax">18</em>℃
				</p>
				<div class="tq">
					<p class="tianq"></p>转<span class="tianq2"></span>
				</div>
				<p class="wind"></p>
				<div class="sky">
					<span>53</span>
					<span>良</span>
				</div>
			</div>
			<div class="weather-le fl wi">
				<p class="week-sp">周<span class="week"></span></p>
				<span class="daly">09月24日</span>
				<div class="imageOne"><img class="bg-4" src="images/100.png" ></div>
				
				<p class="oneday">
					<em class="two-tempMin">18</em>~
					<em class="two-tempMax">25</em>℃
				</p>
				<p class="two-tianq"></p>
				<p class="wind"></p>
				<div class="sky">

					<span>优</span>
				</div>
			</div>
			<div class="weather-le fl wi">
				<p class="week-sp">周<span class="weekTwo"></span></p>
				<span class="dalyTwo">09月25日</span>
				<div class="imageTwo"><img class="bg-5" src="images/100.png" ></div>
				
				<p class="oneday">
					<em class="th-tempMin">18</em>~
					<em class="th-tempMax">25</em>℃
				</p>
				<p class="th-tianq"></p>
				<p class="wind"></p>
				<div class="sky">

					<span>良</span>
				</div>
			</div>
			<div class="zhishu">
				<ul>
					<li>
						<span class="yj">穿衣：舒适</span>
						<div class="ej">
							<i></i>
							<div class="ej-sub">
								<h1>穿衣指数：舒适</h1>
								<p>建议着长袖T恤、衬衫加单裤等服装。年老体弱者宜着针织长袖衬衫、马甲和长裤。</p>
							</div>
						</div>
					</li>
					<li>
						<span>洗车：较适宜</span>
						<div class="ej">
							<i></i>
							<div class="ej-sub">
								<h1>洗车指数：较适宜</h1>
								<p>各项气象条件适宜，无明显降温过程，发生感冒机率较低。</p>
							</div>
						</div>
					</li>
					<li>
						<span>运动指数：适宜</span>
						<div class="ej">
							<i></i>
							<div class="ej-sub">
								<h1>洗车指数：较适宜</h1>
								<p>天气较好，赶快投身大自然参与户外运动，尽情感受运动的快乐吧。</p>
							</div>
						</div>
					</li>
					<li>
						<span>运动：适宜</span>
						<div class="ej">
							<i></i>
							<div class="ej-sub">
								<h1>紫外线强度指数：最弱</h1>
								<p>属弱紫外线辐射天气，无需特别防护。若长期在户外，建议涂擦SPF在8-12之间的防晒护肤品。</p>
							</div>
						</div>
					</li>
					<li>
						<span>紫外线强度：最弱</span>
						<div class="ej">
							<i></i>
							<div class="ej-sub">
								<h1>洗车指数：较适宜</h1>
								<p>较适宜洗车，未来一天无雨，风力较小，擦洗一新的汽车至少能保持一天。</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

		<script>

			$.ajax({
				url: 'https://devapi.heweather.net/v7/weather/now',
				type: 'get',
				dataType: 'json',
				data: {
					location: '117.216818,39.121387',
					key: '92082599e33046d593a72d1c894fef54'
				},
				success: function(res) {
					console.log(res)
					// $('.temp').text(res.daily.)
					$('.temp').text(res.now.temp);
					$('.state').text(res.now.text);
					$('.wind').text(res.now.windDir);
				},
			})
			$.ajax({
				url: 'https://devapi.heweather.net/v7/weather/3d',
				type: 'get',
				dataType: 'json',
				data: {
					location: '117.216818,39.121387',
					key: '92082599e33046d593a72d1c894fef54'
				},
				success: function(res) {
					
					
					
					function formatTime(){
					    var date = new Date();
					    var year = date.getFullYear();
					    var month = date.getMonth()+1;
					    month = month<10? "0"+month:month;
					    var day = date.getDate();
					    
					    return ""+month+"月"+day+"日"+"";
					}
					$('.time').text(formatTime)
					
					function formatWork(){
					    var workArr = ['日','一','二','三','四','五','六']
						
					    var date = new Date();
					    var workIndex = date.getDay();
						Week = workArr[workIndex]
						
					    return ""+Week+"";
					}
					$('.work').text(formatWork)
					
					
					
					$('.tempMax').text(res.daily[0].tempMax)
					$('.tempMin').text(res.daily[0].tempMin)
					$('.tianq').text(res.daily[0].textDay)
					$('.tianq2').text(res.daily[0].textNight)
					
					
					
					
					var num = res.daily[0].iconDay
					
					$('.bg').attr('src',"./images/"+num+".png")
					
					
					
					var numOne = res.daily[1].iconDay
					
					$('.bg-4').attr('src',"./images/"+numOne+".png")
					
					
					
					
					var numTwo = res.daily[2].iconDay
					
					$('.bg-5').attr('src',"./images/"+numTwo+".png")
					
					
					$('.two-tempMax').text(res.daily[1].tempMax)
					$('.two-tempMin').text(res.daily[1].tempMin)
					$('.two-tianq').text(res.daily[1].textDay)
					$('.daly').text(res.daily[1].fxDate)
					function formatTimeOne(){
					 
					    var date = new Date();
					    var year = date.getFullYear();
					    var month = date.getMonth()+1;
					    month = month<10? "0"+month:month;
					    var day = date.getDate()+1;
					    
					    return ""+month+"月"+day+"日"+"";
					}
					$('.daly').text(formatTimeOne)
					function formatWorkOne(){
					    var workArr = ['日','一','二','三','四','五','六']
						
					    var date = new Date();
					    var workIndex = date.getDay();
						Week = workArr[workIndex+1]
						
					    return ""+Week+"";
					}
					$('.week').text(formatWorkOne)
					
					
					
					$('.th-tempMax').text(res.daily[2].tempMax)
					$('.th-tempMin').text(res.daily[2].tempMin)
					$('.th-tianq').text(res.daily[2].textDay)
					function formatTimeTwo(){
					 
					    var date = new Date();
					    var year = date.getFullYear();
					    var month = date.getMonth()+1;
					    month = month<10? "0"+month:month;
					    var day = date.getDate()+2;
					    
					    return ""+month+"月"+day+"日"+"";
					}
					$('.dalyTwo').text(formatTimeTwo)
					function formatWorkTwo(){
					    var workArr = ['日','一','二','三','四','五','六']
						
					    var date = new Date();
						// console.log(workIndex)
					    var workIndex = date.getDay();
						console.log(workIndex+2)
						if(workIndex+2 == 7){
							workIndex = -2;
						}
						Week = workArr[workIndex+2]
						
					    return ""+Week+"";
					}
					$('.weekTwo').text(formatWorkTwo)
				},
			})
		</script>
	</body>
</html>
